<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改角色信息</title>
    <link rel="stylesheet" th:href="@{~/component/pear/css/pear.css}" media="all">
    <link rel="stylesheet" th:href="@{~/common/css/common.css}" media="all">
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
            	<input type="hidden" id="id" name="id" >
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="name" lay-verify="required" name="name" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色key值</label>
                    <div class="layui-input-block">
                        <input type="text" id="roleKey" lay-verify="required" name="roleKey" autocomplete="off" placeholder="请输入角色roleKey" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="正常" checked>
                        <input type="radio" name="status" value="0" title="禁用">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单权限</label>
                    <div class="layui-input-block">
						<ul id="menuTree"  class="dtree" data-id="0"></ul>
					</div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="role-save">
                <i class="layui-icon layui-icon-release"></i> 确认修改
            </button>
            <button type="button" id="close" class="pear-btn pear-btn-danger pear-btn-sm" >
                <i class="layui-icon layui-icon-close"></i> 取消
            </button>
        </div>
    </div>
</form>
<script th:src="@{~/component/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{~/component/pear/pear.js}" charset="utf-8"></script>
<script th:src="@{~/common/js/common.js}" charset="utf-8"></script>
<script>
layui.use(['form','jquery','dtree'],function(){
    let form = layui.form
    	,dtree = layui.dtree;
    let $ = layui.jquery;
    
    let id = getQueryString("id");
    
    
    
    $.post("/role/selectById",{"id":id},function(result){
        if(result.code == 0){
        	$("#id").val(result.data.id);
        	$("#name").val(result.data.name);
        	$("#roleKey").val(result.data.roleKey);
        	$("input[name=status][value=1]").attr("checked", result.data.status == 1 ? true : false);
            $("input[name=status][value=0]").attr("checked", result.data.status == 0 ? true : false);
           
            var menuIdArr = [];
            $.each(result.data.menuList,function(index,item){
            	menuIdArr.push(parseInt(item.id));
    		});
            var menuIds = menuIdArr.toString();
            /* 渲染部门树形选择框 */
            var DTreeNode = dtree.render({
                 elem: "#menuTree",
                 method: 'get',
                 ficon: ["1", "-1"],
                 icon:"2",
                 dataStyle: "layuiStyle",
                 url: "/menu/selectMenuTreeForRole",
                 checkbarType: "all", // 默认就是all，其他的值为： no-all  p-casc   self  only
                 response:{message:"msg",statusCode:0},
                 checkbar: true,
                 done: function(res, $ul, first){
                	 dtree.chooseDataInit("menuTree",menuIds); // 初始化选中
                 }
             });
             
             
            
            form.render(); //更新全部   
        }else{
            layer.msg(result.msg,{icon:2,time:3000});
        }
	});
    
    dtree.on("node(menuTree)", function(obj){
 		var nodeId = obj.param.nodeId;
 		DTreeNode.clickNodeCheckbar(nodeId);// 点击节点选中复选框
     });

    /* 点击确认修改按钮提交数据 */
    form.on('submit(role-save)', function(data){
    	
    	var menuIds = [];
    	var checkbarNodes = dtree.getCheckbarNodesParam("menuTree");
		$.each(checkbarNodes,function(index,item){
			menuIds.push(parseInt(item.nodeId));
			data.field.menuIds = menuIds.toString();
		});
    	
        $.ajax({
            url:'/role/update',
            data:JSON.stringify(data.field),
            dataType:'json',
            contentType:'application/json',
            type:'post',
            success:function(result){
                if(result.code == 0){
                    layer.msg(result.msg,{icon:1,time:1000},function(){
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                        parent.layui.table.reload("role-table");
                    });
                }else{
                    layer.msg(result.msg,{icon:2,time:3000});
                }
            }
        }) 
        return false;
    });
    
    $("#close").click(function(){
    	parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
    });
    
    
})




</script>
</body>
</html>